<template>
  <div id="top">
    <a-input-search
      v-model:value="value"
      placeholder="输入专题名称搜索"
      style="width: 370px"
      @search="onSearch"
    />
    <a-button @click="showModal">
      <PlusCircleOutlined />
      <span style="margin-left: 5px">新建专题</span>
    </a-button>
    <a-modal v-model:visible="visible" @ok="handleOk" :closable="false">
      <a-input v-model:value="valueTitle" placeholder="请输入专题的名称" />
    </a-modal>
  </div>
  <div>
    <a-list
      id="AsList"
      bordered
      :data-source="listData"
      :pagination="pagination"
    >
      <template #renderItem="{ item }">
        <a-list-item id="list" tabindex="1">
          <span>专题名：{{ item.filename }}</span>
          <span>已收录 {{ item.AsNum }} 篇文章</span>
          <a-button size="small" @click="doAddCoAs(item)"> 点此收录 </a-button>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import { addTopicFile, getTopicFile, doTopicFileAddAs } from "../../api/users";
import { message } from "ant-design-vue";

export default defineComponent({
  props: ["AsAid"],

  setup(props) {
    const value = ref("");
    const valueTitle = ref("");
    const listData = ref();
    const visible = ref(false);

    const doAddCoAs = (item) => {
      // console.log(item.cid);
      doTopicFileAddAs({
        url: "/users/doTopicFileAddAs",
        cid: item.cid,
        aid: props.AsAid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    getTopicFile({
      url: "/users/getTopicFile",
      success: (res) => {
        // console.log(res.data);
        listData.value = res.data;
      },
      err: (err) => {
        console.log(err);
      },
    });

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      addTopicFile({
        url: "/users/addTopicFile",
        topicFileName: valueTitle.value,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data.data);
          listData.value.push({
            cid: res.data.cid,
            filename: res.data.filename,
            AsNum: res.data.AsNum,
          });
          visible.value = false;
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const onSearch = (searchValue) => {
      console.log("use value", searchValue);
      console.log("or use this.value", value.value);
    };

    return {
      value,
      onSearch,
      listData,
      visible,
      showModal,
      handleOk,
      valueTitle,
      doAddCoAs,
    };
  },
  components: {
    PlusCircleOutlined,
  },
});
</script>

<style scoped>
#top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
#list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
